import './CommonMenu.scss'
import { useState } from 'react'
import { useRequest } from 'alova/client'

import { useEventEmitter, useMount, useUpdateEffect } from 'ahooks'

import { Http } from '../Utils/Api'
import { refreshStore } from '../Config/zustand'
import { PageTopOptions } from '../Utils/PageAssembly'
import { DevextremeTreeList } from '../Utils/Devextreme'

// 菜单页面配置
const TreeConfig = {
    base: {
        itemsExpr: 'children',
        allowColumnReordering: true, // 允许重新排序
        showColumnHeaders: true, // 是否显示列标题
        columnMinWidth: 50, // 列最小宽度
        columnAutoWidth: true,// 自动宽度
        allowColumnResizing: true, //是否可调整列宽
        columnResizingMode: 'widget', //列宽状态  nextColumn 总组件宽度不会更改  widget 所有其他列保持其宽度
        repaintChangesOnly: true,// 动态摘要 ,
        focusedRowEnabled: true, // 是否聚焦
        showBorders: false,// 是否外边框
        showRowLines: false,// 子单元格底边框
        showColumnLines: false,// 子单元格竖向边框
        rowAlternationEnabled: true,//斑马格
    },
    columnDlyWidth: 260,
    columnFixing: true,// 启用 固定列
    columnChooser: true, //启用 列选择器
    columnChooserMode: 'select', // 列选择器模式 dragAndDrop拖拽   select选择
    columnChooserSearch: true, // 启用 列选择器搜索框
    columnChooserSearchPlaceholder: '默认文字', // 搜索框默认文字
    columnChooserSelectionAll: true, // 列选择器 全选按钮
    columnChooserSelectionClick: true, // 列选择器 单击选择
    columnChooserSelectionRecursive: true, // 列选择器 递归选择 (呈现树形)
    filterRow: true, // 启用 行筛选
    filterRowApplyFilter: 'none', // 行筛选方式  none 自动搜索 onClick 点击头部搜索
    searchPanel: true,  // 启用头部筛选
    headerFilter: true, // 启用 筛选器
    groupPanel: true,  // 启用 分组
    groupPanelAutoExpandAll: true, // 分组自动展开
    groupPanelAllowColumnDragging: true, // 是否可以取消分组
    groupingExpandMode: 'buttonClick', // 分组 展开模式 rowClick 点击行 buttonClick 点击按钮
    groupingContextMenuEnabled: true, // 分组 启用右键菜单
    groupingAutoExpandAll: true, // 分组 自动展开
    groupingAllowCollapsing: true, // 是否允许折叠 (false 只能通过编程控制)
    sorting: 'multiple',  //排序功能 不可 none 单选 single 多选 multiple
    selectionMode: 'single',//选中数据行 不可 none 单选 single 多选 multiple
    selectionAllowSelectAll: true,  // 是否全选
    selectionSelectAllMode: 'allPages',// 全选方式 'allPages' 所有记录, 'page' 当前页面记录
    selectionShowCheckBoxesMode: 'onLongTap',  // 选择方式 none 不可选中 always 选择框选中 onClick 点击选中  onLongTap 长按选中
    rowDragging: false,  // 启用行拖拽
    rowDraggingShowDragIcons: true,  //是否有把手
    export: true, // 启用 导出
    exportAllowExportSelectedData: true, // 全部导出
}

// 菜单字段设置
const FieldsConfig = [
    {
        dataField: 'uuid',          // 数据字段
        caption: '唯一ID',          // 显示名称
        isAdded: true,              // 参与新增
        isModify: true,             // 参与修改
        isSearch: false,             // 参与查询
        visible: false,              // 是否显示
        fixed: true,             // 固定当前列
        fixedPosition: 'left',           // 固定位置
        allowResizing: true,        // 列宽是否可调整
        minWidth: 50,        // 最小单元格
        width: 160,          //列宽
        alignment: 'center',         // 对齐方式
        cssClass: '',                // 额外样式
        dataType: '',                // 字段类型
        format: '',                  // 序列化方式
        allowGrouping: true,        // 是否参与分组
        autoExpandGroup: true,   // 自动展开分组
        groupIndex: 0,         // 默认分组  -1 为空
        allowReordering: false,      // 是否可排序
        allowSorting: true,           // 是否可排序
        defaultSortIndex: 0,          // 排序顺序
        defaultSortOrder: 'asc',       // 排序方式
        allowHeaderFiltering: true,  // 筛选器状态
        allowFiltering: true,        // 是否行内筛选 
        showInColumnChooser: true,     // 是否出现在列选择器
        calculateCellValue: 'abc,bbc',  // 组合单元格
        customizeText: 'abc',    // 序列化单元格
        isMapping: false,         // 是否映射
        mappingType: '',         // 映射类型
        mappingData: '',         // 映射数据,
        valueType: 'Hidden',
        rules: true,
    },
    {
        dataField: 'tableName',
        caption: '菜单名称',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: false,
        mappingType: '',
        mappingData: '',
        valueType: 'Input',
        rules: true,
    },
    {
        dataField: 'type',
        caption: '菜单类型',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: true,
        mappingType: 'DataMapping',
        mappingData: 'menuType',
        mappingValue: 'value',
        mappingLable: 'label',
        valueType: 'Radio',
        rules: true,
    },
    {
        dataField: 'parentUuid',
        caption: '父级节点',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: true,
        mappingType: 'ApiMapping',
        mappingData: 'Menu',
        mappingValue: 'value',
        mappingLable: 'title',
        valueType: 'TreeSelect',
        rules: true,
    },
    {
        dataField: 'sortId',
        caption: '排序',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: false,
        mappingType: '',
        mappingData: '',
        valueType: 'Input',
        rules: true,
    },
    {
        dataField: 'icon',
        caption: '图标',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: false,
        mappingType: '',
        mappingData: '',
        valueType: 'Icon',
        rules: true,
    },
    {
        dataField: 'isEnabled',
        caption: '是否启用',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: true,
        mappingType: 'DataMapping',
        mappingData: 'isYeas',
        mappingValue: 'value',
        mappingLable: 'label',
        valueType: 'Radio',
        rules: true,
    },
    {
        dataField: 'targetUrl',
        caption: '页面地址',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: false,
        mappingType: '',
        mappingData: '',
        valueType: 'Input'
    },
    {
        dataField: 'remark',
        caption: '备注信息',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: false,
        mappingType: '',
        mappingData: '',
        valueType: 'TextArea',
        rules: false
    },
]

// 头部操作
const topOptions = {
    added: { url: 'posMenu' },
    refresh: {},
    sortData: { url: '123' },
    search: { url: '123' },
}

// 行操作 
const ColumnOptions = (e) => [
    {
        title: '修改',
        smallTitle: '修改菜单',
        modalType: 'model',
        page: 'FromModify',
        data: {
            url: 'putMenu',
            fields: FieldsConfig,
            init: e.data,
        }
    },
    e.data.type === 'menu' && {
        title: '菜单设置',
        smallTitle: e.data.tableName + ' -- 菜单设置',
        modalType: 'drawer',
        page: 'MenuConfig',
        width: '80vw',
        data: e.data
    },
    {
        title: '删除',
        smallTitle: '删除数据',
        modalType: 'model',
        page: 'FromDelete',
        danger: true,
        data: {
            url: 'delMenu',
            init: e.data,
        }
    }
]

// 默认页码配置
const defaultPagig = { pageIndex: 1, pageSize: 10 }


const AdministratorsMenu = () => {
    const { refresh } = refreshStore()
    const [dataSource, setDataSource] = useState([])
    const [total, setTotal] = useState(0)
    const [Paging, setPageing] = useState(defaultPagig)
    const { send } = useRequest(params => Http({ url: 'getMenu', params }), { immediate: false })
    const PagingEvent = useEventEmitter()
    PagingEvent.useSubscription(val => {
        send(val).then(res => {
            const { list, total } = res.data
            setTotal(total)
            setDataSource(list)
            setPageing(val)
        })
    })

    useMount(() => {
        // 获取默认配置 // 表格 字段等等 // 确认菜单类型  data tree olap html
        send(Paging).then(res => {
            const { list, total } = res.data
            setTotal(total)
            setDataSource(list)
        })
    })

    useUpdateEffect(() => {
        send(defaultPagig).then(res => {
            const { list, total } = res.data
            setTotal(total)
            setDataSource(list)
        })
    }, [refresh])

    const DevEvent = useEventEmitter()
    DevEvent.useSubscription(val => {
        // console.log('DEV 回调中控', val)
    })

    return (
        <div className='CommonMenu AdministratorsMenu'>
            <div className='Right'>
                <div className='Top'>
                    <PageTopOptions topOptions={topOptions} DevEvent={DevEvent} fields={FieldsConfig} />
                </div>
                <div className='Table'>
                    <DevextremeTreeList
                        DataConfig={TreeConfig}
                        dataSource={dataSource}
                        fields={FieldsConfig}
                        ColumnOptions={ColumnOptions}
                        DevEvent={DevEvent}
                    />
                </div>
            </div>
        </div>
    );
};

export default AdministratorsMenu;